import { useCssVar } from '@vueuse/core'
import { kebabCase } from 'lodash-es'
import { defineStore } from 'pinia'
import { defaultLayout, lightThemeOverrides, deepThemeOverrides } from '@/settings'
import lightSearchImg from '@/assets/images/light-search.png'
import deepSearchImg from '@/assets/images/deep-search.png'
import lightRollback from '@/assets/images/light-rollback.png'
import deepRollback from '@/assets/images/deep-rollback.png'
import lightNodata from '@/assets/images/light-nodata.png'
import deepNodata from '@/assets/images/deep-nodata.png'
import lightFileLinkImg from '@/assets/images/light-link.png'
import deepFileLinkImg from '@/assets/images/deep-link.png'

export const useAppStore = defineStore('app', {
  state: () => ({
    // 是否深色调
    isDeep: false,
    layout: defaultLayout,
    naiveThemeOverrides: null,
  }),
  getters: {
    searchImg() {
      return this.isDeep ? deepSearchImg : lightSearchImg
    },
    rollbackImg() {
      return this.isDeep ? deepRollback : lightRollback
    },
    nodataImg() {
      return this.isDeep ? deepNodata : lightNodata
    },
    containerDom() {
      return this.isDeep
        ? '#data-title'
        : '#data-tabs > .n-tabs-nav--line-type .n-tabs-nav-scroll-wrapper'
    },
    buttonColor() {
      return this.isDeep ? '#2BA1FF' : '#6D61E3'
    },
    fileLinkImg() {
      return this.isDeep ? deepFileLinkImg : lightFileLinkImg
    },
  },
  actions: {
    toggleDeep() {
      this.isDeep = !this.isDeep
      this.naiveThemeOverrides = this.isDeep ? deepThemeOverrides : lightThemeOverrides
      this.setupCssVar()
    },
    setLayout(v) {
      this.layout = v
    },
    setupCssVar() {
      if (!this.naiveThemeOverrides) {
        this.isDeep = false
        this.naiveThemeOverrides = lightThemeOverrides
        document.body.className = 'light-container'
        // this.isDeep = true
        // this.naiveThemeOverrides = deepThemeOverrides
        // document.body.className = 'deep-container'
      } else {
        document.body.className = this.isDeep ? 'deep-container' : 'light-container'
      }
      const common = this.naiveThemeOverrides?.common || {}
      for (const key in common) {
        useCssVar(`--${kebabCase(key)}`, document.documentElement).value = common[key] || ''
        if (key === 'primaryColor')
          window.localStorage.setItem('__THEME_COLOR__', common[key] || '')
      }
    },
  },
  persist: {
    paths: ['isDeep', 'naiveThemeOverrides'],
    storage: localStorage,
  },
})
